<template>
	<view class="box" @click="personalLetter=null">
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />车会员
			<p class="remove" v-if="titXuan == 2" @click="bianji">{{text}}</p>
		</view>
		<view class="tit">
			<view :class="titXuan == 1 ? 'xuan tit_item' : 'tit_item'" @click="titClick(1)">
				礼品管理
				<image v-if="titXuan == 1" class="image" src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix"></image>
				<span v-else class="image"></span>
			</view>
			<view :class="titXuan == 2 ? 'xuan tit_item' : ' tit_item'" @click="titClick(2)">
				员工管理
				<image v-if="titXuan == 2" class="image" src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix"></image>
				<span v-else class="image"></span>
			</view>
		</view>
		<view class="classify" v-if="titXuan == 1">
			<scroll-view scroll-y="true" class="classify-left scroll-view">
				<view class="iteam" :style="{backgroundColor:cut==i.id?'#ffffff':''}" v-for="(i,j) in category" :key="j" @click="cutClik(i.id)">
					{{i.num}}
				</view>
			</scroll-view>
			<view class="classify-right scroll-view">
				<view v-if="cut==1" class="productList">
					<view class="iteam" v-for="(item,index) in giftInventoryList" :key="index">
						<image class="iteam_image" :src="item.giftInformation.giftPicture" mode="aspectFill"></image>
						<view class="iteam_right">
							<view class="title">{{item.giftInformation.giftName}}</view>
							<view class="neirong" style="margin-bottom: 5rpx;">
								<span style="margin-right:20rpx;">库存</span>
								<span style="color: #333333;">{{item.stock}}份</span>
							</view>
							<view class="neirong">
								<span style="margin-right:20rpx;">送出</span>
								<span style="color: #333333;">{{item.sendTotal}}份</span>
							</view>
						</view>
					</view>
					<view v-if="giftInventoryList.length == 0" class="none">
						<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
						<view>没有更多数据了</view>
					</view>
				</view>
				<view v-if="cut==2" class="record">
					<view class="choice">
						<view class="choice_time">
							<uni-datetime-picker v-model="ranges" type="daterange" @change="maskClick" />
						</view>
						<view class="choice_xz">
							<uni-data-select v-model="value" :localdata="giftLists" @change="change"></uni-data-select>
						</view>
					</view>
					<view class="iteam" v-for="(item,index) in receivingRecordList" :key="index">
						<view class="iteam_s">
							<view class="iteam_span">用户</view>
							<span style="color:#333;">：</span>
							<view class="">{{item.receiverName}}</view>
						</view>
						<view class="iteam_s">
							<view class="iteam_span">车牌号</view>
							<span style="color:#333;">：</span>
							<view class="">{{item.licensePlateNumber}}</view>
						</view>
						<view class="iteam_s">
							<view class="iteam_span">领取</view>
							<span style="color:#333;">：</span>
							<view class="">{{item.giftName}}*{{item.quantity}}</view>
						</view>
						<view class="iteam_s">
							<view class="iteam_span">发放人</view>
							<span style="color:#333;">：</span>
							<view class="">{{item.issuerName}}</view>
						</view>
						<view class="iteam_s">{{item.recordTime}}</view>
					</view>
				</view>
				<view v-if="receivingRecordList.length == 0 && cut==2" class="none">
					<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
					<view>没有更多数据了</view>
				</view>
			</view>
		</view>
		<view v-if="titXuan == 2" class="Employee">
			<view class="Employee_tab">
				<view class="name">员工姓名</view>
				<view class="phone">电话</view>
			</view>
			<view class="iteam" v-for="(item,index) in employeesList" :key="item.id" @touchstart="slideBegan" @touchmove="inSlide" @touchend="endSlide" :data-target="'move-box-' + index">
				<view class="iteam_span">
					<view class="radio_item" v-if="text=='完成'" @click="xuanzhong(item.id)" :class="item.active?'radioxz':''"></view>
					<view class="iteam_name">{{item.fullName}}</view>
				</view>
				<view class="iteam_phone">{{item.cellphoneNumber}}</view>
				<view :class="personalLetter == 'move-box-' + index ? 'noSlide' : 'endSlide'" class="youhua" @touchend.stop="">
					<view @click.stop="del(item)"
						style="width: 141rpx;height: 80rpx;background-color: #EA4B4B;border-radius: 6rpx;display: flex;align-items: center;justify-content: center;">
						<img src="https://pic.bangbangtongcheng.com/fe44a1005d7941cea087d4bae0f9c6d2"
							style='width: 40rpx;height: 40rpx;'>
						<text style="color: #fff;font-size: 30rpx;margin-left: 10rpx;">删除</text>
					</view>
				</view>
			</view>
			<view v-if="employeesList.length == 0" class="none">
				<image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
				<view>没有更多数据了</view>
			</view>
			<view class="newlyAdded" v-if="text=='管理'" @click="deails()">
				<image class="image" src="https://pic.bangbangtongcheng.com/static/bbcz/jiahao.png" mode=""></image>
				<span class="xz">新增员工（{{employeesList.length}}/5）</span>
			</view>
			<view class="newlyDeleted" @click="deleteEmployee" v-else>
				删除
			</view>
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	let statusBarHeight;
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//#endif
	// #ifdef APP-PLUS
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//  #endif
	// #ifdef MP-WEIXIN
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88;
	//  #endif
	import Tabbar from "@/components/tabbar.vue";
	export default {
		data() {
			return {
				statusBarHeight,
				imgUrl: this.$imgSrc,
				category:[
					{id:1,num:"礼品库存"},
					{id:2,num:"领取记录"},
				],
				range: [
				    { value: 0, text: "玻璃水" },
				    { value: 1, text: "擦车布" },
				    { value: 2, text: "保养" },
				],
				ranges:[],
				titXuan:1,
				cut:1,
				show:false,
				time:"",
				mode:"date",
				text:"管理",
				ygDelete:false,
				userInfo: uni.getStorageSync("Pduser"),
				// 员工信息列表
				employeesList:[],
				personalLetter: null,
				hideLeft: 0,
				giftInventoryList:[],
				giftLists:[],
				value:"",
				receivingRecordList:[]
			};
		},
		components: { 
			"view-tabbar": Tabbar
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		onLoad(options) {
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		onShow() {
			this.giftInventory()
			this.giftList()
			this.getEmployees()
		},
		methods: {
			// 获取礼品库存
			giftInventory(){
				let that = this;
				this.$myRequest
				.get("/api/mobile/vehicleOwner/getGiftInventory", {
					merchantId:this.userInfo.merchantId
				}).then(res => {
					this.giftInventoryList = res.merchantGiftDistribution.pageList;
				});
			},
			// 获取礼品列表
			giftList(){
				let that = this;
				this.$myRequest
				.get("/api/mobile/vehicleOwner/getAllGiftLists", {
					merchantId:this.userInfo.merchantId
				}).then(res => {
					let arr=[]
					res.GiftLists.pageList.forEach(v=>{
						arr.push({value: v.giftId, text: v.giftInformation.giftName})
					})
					this.giftLists = arr;
				});
			},
			// 获取领取记录信息列表
			receivingRecord(){
				let that = this;
				this.$myRequest
				.get("/api/mobile/vehicleOwner/getReceivingRecords", {
					distributors:this.userInfo.merchantId,
					recordStartTime:this.ranges[0] || "",
					recordEndTime:this.ranges[1] || "",
					giftId:this.value
				}).then(res => {
					this.receivingRecordList = res.giftReceiveRecordList.pageList;
				});
			},
			// 获取员工信息
			getEmployees(){
				let that = this;
				this.$myRequest
				.get("/api/mobile/vehicleOwner/getMerchantStaffList", {
					merchantId:this.userInfo.merchantId
				}).then(res => {
					res.merchantStaffs.forEach(v=>{
						v.active=false
					})
					this.employeesList = res.merchantStaffs;
				});
			},
			del(item){
				let that=this
				uni.showModal({
				  title: "",
				  content: "确定删除该员工吗？",
				  success: function (res) {
				    if (res.confirm) {
				      that.$myRequest.post("/api/mobile/vehicleOwner/deleteEmployeeByIds", {
				      	ids:item.id
				      }).then(res => {
				      	uni.showToast({
				      		title:res.msg,
				      		icon: "none",
				      		mask: true,
				      	});
				      	that.getEmployees()
				      });
				    } else if (res.cancel) {
				      console.log("用户点击取消");
				    }
				  }
				});
			},
			// 删除选中员工
			deleteEmployee(){
				let that=this
				let arr=[]
				this.employeesList.forEach(v=>{
					if (v.active) {
						arr.push(v.id)
					}
				})
				if (arr.length==0) {
					uni.showToast({
						title:"请选择员工",
						icon: "none",
						mask: true,
					});
					return false
				}
				uni.showModal({
				  title: "",
				  content: "确定删除该员工吗？",
				  success: function (res) {
				    if (res.confirm) {
				      that.$myRequest.post("/api/mobile/vehicleOwner/deleteEmployeeByIds", {
				      	ids:arr.join(",")
				      }).then(res => {
				      	uni.showToast({
				      		title:res.msg,
				      		icon: "none",
				      		mask: true,
				      	});
				      	that.getEmployees()
				      });
				    } else if (res.cancel) {
				      console.log("用户点击取消");
				    }
				  }
				});
			},
			change(e){
				this.value=e
				this.receivingRecord()
			},
			maskClick(e){
				this.ranges=e
				this.receivingRecord()
			},
			titClick(index){
				this.titXuan=index
			},
			cutClik(index){
				this.cut=index
				if(index==1){
					this.giftInventory()
				}else{
					this.receivingRecord()
				}
			},
			bianji(){
				if(this.text=="管理"){
					this.text="完成"
				}else{
					this.text="管理"
				}
			},
			xuanzhong(id){
				this.employeesList.forEach(v=>{
					if (v.id==id) {
						if (v.active) {
							v.active=false
						}else{
							v.active=true
						}
					}
				})
			},
			deails(){
				if (this.employeesList.length==5) {
					uni.showToast({
						title:"最多只能添加5名员工！",
						icon: "none",
						mask: true,
					});
					return
				}
				uni.navigateTo({
					url: "/pages_owner/carMember/addEmployees"
				});
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
			slideBegan(e) {
				console.log("1111")
				this.touchStart = e.touches[0].pageX;
			},
			inSlide(e) {
				console.log("2222")
				this.touchDirection = e.touches[0].pageX - this.touchStart > 0 ? "right" : "left";
			},
			endSlide(e) {
				console.log("3333")
				if (this.touchDirection == "left") {
					this.hideLeft = '1'
					this.personalLetter = e.currentTarget.dataset.target;
				} else {
					this.personalLetter = null;
				}
				this.touchDirection = null;
			},
		}
	};
</script>

<style lang="less" scoped>
	page{
		background-color: #fff;
	}
	.box {
		width: 100%;
		background-color: #fff;
		min-height: 100vh;
	}
	/deep/.uniui-calendar:before{
		content:""
	}
	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;
	
		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}
	
		.image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			// top: 104rpx;
			right: 30rpx;
		}
	
		p {
			position: absolute;
			// top: 90rpx;
			line-height: 45rpx;
			bottom: 21rpx;
			right: 30rpx;
			font-size: 32rpx;
			color: #fff;
		}
	
		.remove {
			width: 123rpx;
			height: 48rpx;
			border-radius: 6rpx;
			border: 1px solid #FFFFFF;
			text-align: center;
			line-height: 48rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.tit {
		width: 100%;
		height: 100rpx;
		background-color: #f4f4f4;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 30rpx;
		font-weight: 400;
		color: #999999;
		.tit_item{
			display: flex;
			flex-direction: column;
			align-items: center;
			.image{
				width: 60rpx;
				height: 30rpx;
			}
		}
		.xuan{
			font-size: 36rpx;
			font-weight: 400;
			color: #64B6A8;
		}
	}
	.scroll-view {
		// #ifdef MP-WEIXIN
		height: calc(100vh - var(--status-bar-height) - 5px - 88px - 100rpx);
		// #endif
		// #ifdef H5 || APP-PLUS
		height: calc(100vh - var(--status-bar-height) - 5px - 88rpx - 100rpx);
		// #endif
	}
	.classify{
		display: flex;
		.classify-left{
			width: 180rpx;
			background: #f4f4f4;
			.iteam{
				vertical-align:top;
				width: 100%;
				height: 110rpx;
				display: flex;
				justify-content: center;
				align-items: center;;
			}
		}
		.classify-right{
			box-sizing: border-box;
			width: 570rpx;
			background-color: #fff;
			overflow: auto;
			padding: 40rpx 0;
			.productList{
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0 60rpx;
				.iteam{
					display: flex;
					margin-bottom: 60rpx;
					.iteam_image{
						width: 220rpx;
						height: 160rpx;
						border-radius: 6rpx;
					}
					.iteam_right{
						flex: 1;
						margin-left: 40rpx;
						.title{
							font-size: 28rpx;
							font-weight: 550;
							color: #333333;
							margin-bottom: 20rpx;
							margin-top: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1; //想要的行数
							-webkit-box-orient: vertical;
						}
						.neirong{
							font-size: 26rpx;
							font-weight: 400;
							color: #999999;
						}
					}
				}
			}
			.record{
				padding: 0 30rpx;
				.choice{
					display: flex;
					flex-direction: column;
					margin-bottom: 30rpx;
					.choice_time{
						width: 100%;
					}
					.choice_xz{
						width: 100%;
						margin-top: 20rpx;
					}
				}
				.iteam{
					margin-bottom: 30rpx;
					width: 510rpx;
					height: 270rpx;
					background-color: #FFFFFF;
					box-shadow: 0px 1px 6rpx 1px rgba(0,0,0,0.16);
					border-radius: 12rpx;
					padding: 24rpx 34rpx;
					.iteam_s{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						margin-bottom: 16rpx;
						.iteam_span{
							color: #333333;
							width: 90rpx;
							text-align-last: justify;
						}
					}
				}
			}
		}
	}
	.Employee{
		width: 100%;
		padding: 0 30rpx;
		padding-top: 32rpx;
		overflow: hidden;
		.Employee_tab{
			width: 690rpx;
			height: 80rpx;
			border-radius: 12rpx;
			border: 1px solid #C7C7C7;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.name{
				flex: 1;
				font-size: 32rpx;
				font-weight: 550;
				color: #333333;
				text-align: center;
			}
			.phone{
				flex: 1;
				font-size: 32rpx;
				font-weight: 550;
				color: #333333;
				text-align: center;
			}
		}
		.iteam{
			width: 690rpx;
			height: 85rpx;
			border-bottom: 1px solid #C7C7C7;
			display: flex;
			align-items: center;
			position: relative;
			.noSlide {
				transform: translateX(0);
				transition: 0.5s;
			}
			.endSlide {
				transform: translateX(190rpx);
			}
			.youhua {
				width: 140rpx;
				height: 80rpx;
				position: absolute;
				right: 0;
				background-color: #fff;
			}
			.iteam_phone{
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				text-align: center;
			}
			.iteam_span{
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
				.radio_item {
					width: 36rpx;
					height: 36rpx;
					border: 1px solid #64B6A8;
					border-radius: 36rpx;
					margin-right: 14rpx;
				
					span {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}
				}
				
				.radioxz {
					border: 1px solid #64B6A8;
					position: relative;
				}
				
				.radioxz::before {
					content: "";
					width: 24rpx;
					height: 24rpx;
					border-radius: 24rpx;
					background-color: #64B6A8;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
		.newlyAdded{
			position: fixed;
			left: 50%;
			bottom: 100rpx;
			transform: translateX(-50%);
			width: 670rpx;
			height: 84rpx;
			background-color: #64B6A8;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.image{
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
			}
			.xz{
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		.newlyDeleted{
			position: fixed;
			left: 50%;
			bottom: 100rpx;
			transform: translateX(-50%);
			width: 670rpx;
			height: 84rpx;
			background-color: #64B6A8;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 34rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.none {
		text-align: center;
	
		image {
			width: 430rpx;
			margin-bottom: 16rpx;
		}
	
		view {
			height: 40rpx;
			line-height: 40rpx;
			color: #666;
		}
	}
</style>
